<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 告知浏览器此页面属于什么字符编码格式 -->
		<title>CQUT孙煜琳-JQuery</title>
		<link rel="icon" href="./images/logo.png" type="image/x-icon" />

		<!-- js外部文件 -->
		<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
		<style>
			.red
		</style>
	</head>
	<body background = "blue.jpg";
		style="
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-size:100% 100%;">
		<h3 >This is JQuery page</h3>
		<div>显示一下！</div>
			
		<div class="outDiv">
			<p>
				<div id="div01" name="div01" class="myDiv"><span>第一个 选择器</span></div>
			</p>
			<p>
				<div id="div02" name="div02" class="myDiv">第二个 选择器</div>
			</p>
			<p>  
				<!-- 隐藏域 -->
				<input type="hidden" name="userID" value="4"/>
			</p>
			<p>  
				<input type="checkbox" name="mylove" value="love1"/>爱好1
				<input type="checkbox" name="mylove" value="love2"/>爱好2
				<input type="text" name="myInput" value="sunyulin"/>

			</p>

			/* action="#"是无法在form表单实现跳转连接的
			因此需要改为action="javascript:void(0)" 
			--- 表示空表达，可作用于form表单或action标签上
			*/
		
			<form id="myForm" action="javaScript:void(0)" method="post">
				<input type="hidden" id="userId" name="userId" value="1"/>
				<p>
					<label for="userName">用户名：</label>
					<input type="text" id="userId" name="userName" value="sunyulin"/>
				</p>
				<p>
					<label for="password">密码：</label>
					<input type="password" id="password" name="password" value="11923040212" />
				</p>
				<p>
					<input type="hidden" name="cityId" value="2022">
				</p>
				<p>
					<label for="cityName">城市名：</label>
					<input type="text" name="cityName" value="chongqing" readonly>
				</p>
				<p>
					<label for="localCityName">籍贯：</label>
					<input type="text" name="localCityName" value="重庆">
				</p>
				
				/* 验证码 */
				<div>
					<label for="VerificationCode">验证码：</label>
					<input type="text"  placeholder="请按图示输入验证码！"
					style="float:center; width:18%; margin-bottom: 0px;">
					<canvas id="canvas" width="100" height="36" @click="refreshCode"></canvas>
				</div>
				
				<p>
					<button onclick="fun01()">btn01</button>
					<button id="btn02">btn02</button>
				</p>
				<p>
					<button id="btn03">新增用户</button>
					<button id="btn04">修改城市</button>
				</p>
			</form>
		</div>
		<script>
			/* // $符号等同于JQuery
			// JQuery函数需要一个参数，是一个匿名函数
			// 页面加载时执行函数 */
			/* AJax【提交到后端服务器】
			1.JSON提交
			2.form表单数据结构提交 */
			$(function(){
				jqueryTest01();
				
				$("#btn02").on("click",function(){
					fun02();
				});
				$("#btn03").click(function(){
					insertUser();
				});
				$("#btn04").click(function(){
					updateCity();
				});
			});

			function fun01(){
				alert("这个按钮让我弹出！");
			}

			function fun02(){
				location.href = "http://www.bilibili.com";
				location.href
			}

			function updateCity(){
				$.ajax({
					url:"http://www.sfac.xyz/api/city",
					type:"put",
					contentType:"application/x-www-form-urlencoded",
					data: $("#myForm").serializeArray(),
					success: function(result) {
						//TODO
						if (result.status == 200){
							alert(result.message);
							console.log(result.data);
						} else{
							alert(result.message);
						}
					},
					error: function(erro){
						console.log(erro);
					}
				});
			}

			function insertUser(){
				var user = {};
				user.userName = $("#userName").val();
				user.password = $("#password").val();

				/* 调用ajax函数，参数为ajax的配置属性对象 */
				$.ajax({
					url: "http://www.sfac.xyz/api/user",
					type:"post",
					contentType:"application/json",
					data: JSON.stringify(user),
					success: function(result) {
						//TODO
						if (result.status == 200){
							alert(result.message);
							console.log(result.data);
						} else{
							alert(result.message);
						}
					},
					error: function(erro){
						console.log(erro);
					}
				});
			}

			function jqueryTest01() {
				console.log($ == jQuery);
				/* ID 选择器 */
				console.log($("#div01"));
				console.log($("#div01").html());
				/* Tag选择器 */
				console.log($("div"));
				/* Class选择器 */
				console.log($(".myDiv"));
				/* 属性选择器 */
				console.log($("[name=div01]"));
				/* // 组合选择器
				// div01 显示隐藏域里的值 */
				$("#div01").html($("input[name=userID]").val());
				/* 多项选择器 */
				console.log($('p,div'));
				console.log($('p.myDiv'));
				/* 层级选择器 -- 包含关系 */
				console.log($("div.outDiv p input").val());
				console.log($("div.outDiv input").val());
				/* 子选择器 -- (必须)父子关系 */
				console.log($("div.outDiv>p>input").val());
				/* 过滤器 */
				/* console.log($("input:hidden").val()); */
				/* 文本操作 */
				console.log($("#div01").text());
				console.log($("#div01").html());
				$("#div01").html("个人觉得，学校附近那一家的<span style='color: red;'>章鱼小丸子虽然好吃，但是有点腻</span>");
				$("#div02").text("个人觉得，学校附近那一家的<span style='color: red;'>章鱼小丸子虽然好吃，但是有点腻</span>");
				/* 样式操作 */
				console.log($("#div01").addClass("red"));
				/* console.log($("#div01").hide()); */
				

				console.log($("window").width());
				console.log($("window").height());
				console.log($("document").width());
				console.log($("document").height());
				console.log($("#div0").width());
				console.log($("#div0").height());
				
				/* 文本属性 */
				$("#div01").css("width","600px")
					.css("height","40px")
					.css("text-align","center")
					.css("border","solid 1px gray");
				console.log($("#div01").width());
				console.log($("#div01").height());
				$("#div01").attr("data","sunyulin");

				$("input[type=checkbox][value=love1]").attr("checked","checked");
				$("input[type=checkbox][value=love2]").prop("checked",true);

				$("input[name=myInput][value=love1]").attr("checked","checked");

				console.log($("[name=mylove]").attr("value"));
				console.log($("input[type=checkbox][value=love1]").attr("checked","checked"));
				console.log($("input[type=checkbox][value=love1]").prop("checked","checked"));

				$("#div01").append("<span style='color:blue'>!!!!!!</span>");

				var arr = ["cdsacda",432,"cdsacdasacdas",543542];
				$.each(arr,function(i,item){
					console.log(i +"----" + item);
				});

				console.log($("#myForm").serializeArray);
				var user ={
					userId: 11923040212,
					userName: "sunyulin",
					password: "17782039833"
				};
				console.log(JSON.stringify(user));

				/* 显示隐藏 */

				/* 属性操作 */

				/* 表单操作 */

				/* 结构操作 */

				/* 数据处理 */

				/* 事件处理 */
		
				/* Js 动态验证码 */
				$(document).ready(function() {
					var show_num = [];
					draw(show_num);
					// 绑定click事件
					$("#canvas").on('click',function(){
						draw(show_num);
					})
					// 绑定click事件
					$("#loginButton").bind("click", function() {
						var val = $(".input-val").val().toLowerCase();
						var num = show_num.join("");
						if(val==''){
							layer.msg("请输入验证码！", {icon: 0});
						}else if(val != num){
							layer.msg("验证码错误！请重新输入！", {icon: 0});
							$(".input-val").val('');
							draw(show_num);
						}else{
						}
					});
				});

				// 动态验证码
				function draw(show_num) {
					var canvas_width=$('#canvas').width();
					var canvas_height=$('#canvas').height();
					var canvas = document.getElementById("canvas");//获取到canvas的对象
					var context = canvas.getContext("2d");//获取到canvas画图的环境
					canvas.width = canvas_width;
					canvas.height = canvas_height;
					var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
					var aCode = sCode.split(",");
					var aLength = aCode.length;//获取到数组的长度

					for (var i = 0; i <= 3; i++) {
						var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
						var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
						var txt = aCode[j];//得到随机的一个内容
						show_num[i] = txt.toLowerCase();
						var x = 10 + i * 20;//文字在canvas上的x坐标
						var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
						context.font = "bold 23px 微软雅黑";

						context.translate(x, y);
						context.rotate(deg);

						context.fillStyle = randomColor();
						context.fillText(txt, 0, 0);

						context.rotate(-deg);
						context.translate(-x, -y);
					}

					for (var i = 0; i <= 5; i++) { //验证码上显示线条
						context.strokeStyle = randomColor();
						context.beginPath();
						context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
						context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
						context.stroke();
					}
					for (var i = 0; i <= 30; i++) { //验证码上显示小点
						context.strokeStyle = randomColor();
						context.beginPath();
						var x = Math.random() * canvas_width;
						var y = Math.random() * canvas_height;
						context.moveTo(x, y);
						context.lineTo(x + 1, y + 1);
						context.stroke();
					}
				}

				function randomColor() {//得到随机的颜色值
					var r = Math.floor(Math.random() * 256);
					var g = Math.floor(Math.random() * 256);
					var b = Math.floor(Math.random() * 256);
					return "rgb(" + r + "," + g + "," + b + ")";
				}

			}
		</script>
	</body>
</html>
